<template>
  <PageContainer>
    <div class="pl-[30px]">
      <div>
        <el-form
          ref="ruleFormRef"
          style="max-width: 600px"
          :model="branchInfo"
          label-width="auto"
          class="demo-companyInfo"
          status-icon
        >
          <!-- :rules="rules" -->
          <el-form-item label="门店名称" prop="branchname" required>
            <el-input v-model="branchInfo.branchname" placeholder="请输入门店名称" />
          </el-form-item>
          <el-form-item label="门店logo" prop="logo" required>
            <ImagePicker :width="100" />
          </el-form-item>
          <el-form-item label="地址" prop="idcardExpire" required>
            <div class="w-[600px]">
              <el-row :gutter="10">
                <el-col :span="8">
                  <el-select class="!w-[100%]" v-model="branchInfo.province">
                    <el-option label="广东省" value="广东省" />
                  </el-select>
                </el-col>
                <el-col :span="8">
                  <el-select class="!w-[100%]" v-model="branchInfo.city" placeholder="市">
                    <el-option label="广东省" value="广东省" />
                  </el-select>
                </el-col>
                <el-col :span="8">
                  <el-select class="!w-[100%]" v-model="branchInfo.area" placeholder="区">
                    <el-option label="广东省" value="广东省" />
                  </el-select>
                </el-col>
              </el-row>
              <el-row class="mt-[20px]">
                <el-col :span="24">
                  <el-input
                    class="!w-[100%]"
                    v-model="branchInfo.address"
                    type="textarea"
                    placeholder="请输入详情地址"
                  />
                </el-col>
              </el-row>
            </div>
          </el-form-item>
          <el-form-item label="经纬度" required>
            <el-row :gutter="10" class="w-[600px]">
              <el-col :span="8">
                <el-input v-model="branchInfo.latitude" placeholder="请输入经度" />
              </el-col>
              <el-col :span="8">
                <el-input v-model="branchInfo.longitude" placeholder="请输入纬度" />
              </el-col>
              <el-col :span="8">
                <el-button link @click="onSubmit">获取经纬度</el-button>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="商圈" prop="companyName">
            <el-row :gutter="10" class="w-[600px]">
              <el-col :span="10">
                <el-select class="!w-[100%]" v-model="branchInfo.businessDistrict">
                  <el-option label="广东省" value="广东省" />
                </el-select>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="门店联系人" prop="linkname">
            <el-row :gutter="10" class="w-[600px]">
              <el-col :span="10">
                <el-input v-model="branchInfo.linkname" placeholder="请输入门店联系人" />
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="联系电话" prop="mobile" required>
            <el-row :gutter="10" class="w-[600px]">
              <el-col :span="10">
                <el-input v-model="branchInfo.mobile" placeholder="请输入联系电话" />
              </el-col>
              <el-col :span="10">
                <el-button link>更换手机号</el-button>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="固定电话/手机号" prop="mobile" required>
            <el-row :gutter="10" class="w-[600px]">
              <el-col :span="10">
                <el-input v-model="branchInfo.mobile" placeholder="请输入联系电话" />
              </el-col>
              <el-col :span="10">
                <span class="color-999">对外显示，用于接收咨询</span>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="邮箱" prop="mobile" required>
            <div class="flex gap-[10px]">
              <span class="color-999">未绑定</span>
              <el-button link>绑定邮箱</el-button>
            </div>
          </el-form-item>
          <el-form-item label="QQ/微信" prop="mobile" required>
            <el-row :gutter="10" class="w-[600px]">
              <el-col :span="10">
                <el-input v-model="branchInfo.mobile" placeholder="请输入联系电话" />
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="一句话简介" prop="mobile" required>
            <el-row class="w-[600px]">
              <el-col :span="24">
                <el-input v-model="branchInfo.mobile" placeholder="请输入" />
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="标签" prop="mobile" required> xxx </el-form-item>
          <el-form-item label="温馨提示" prop="mobile" required>
            <el-input v-model="branchInfo.mobile" type="textarea" :rows="3" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="门店介绍" prop="mobile" required>
            <ImageTextMixing />
          </el-form-item>
          <!-- <el-form-item label="企业类型" prop="companyType" required>
            <el-input v-model="branchInfo.companyType" placeholder="请输入企业类型" />
          </el-form-item>
          <el-form-item label="企业所在地" prop="type" required>
            <el-input v-model="branchInfo.companyType" placeholder="请输入企业类型" />
          </el-form-item>
          <el-form-item label="企业办公地址" prop="companyAddress" required>
            <el-input v-model="branchInfo.companyAddress" placeholder="请输入企业办公地址" />
          </el-form-item>
          <el-form-item label="统一社会信用代码" prop="creditCode">
            <el-input v-model="branchInfo.creditCode" placeholder="请输入社会信用代码" />
          </el-form-item> -->
        </el-form>
        <BottomButton>
          <el-button type="primary" @click="onSubmit">保存</el-button>
        </BottomButton>
      </div>
    </div>
  </PageContainer>
</template>

<script lang="ts" setup>
interface BranchInfoForm {
  branchname: string
  province: string
  city: string
  area: string
  address: string
  latitude: string
  longitude: string
  businessDistrict: string
  linkname: string
  mobile: string
}
const branchInfo = reactive<BranchInfoForm>({
  branchname: '',
  province: '',
  city: '',
  area: '',
  address: '',
  latitude: '',
  longitude: '',
  businessDistrict: '',
  linkname: '',
  mobile: '',
})
const onSubmit = () => {
  console.log('submit!')
}
</script>

<style scoped lang="scss"></style>
